<template>
  <div class="goods" id="goods" name="goods">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }">全部商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑END -->

    <!-- 主要内容区 -->
    
    <div class="main">
        <el-collapse v-model="activeNames" @change="handleChange">
          <!-- 手机 电话卡 -->
          <el-collapse-item name="1"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">手机 电话卡</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in phoneList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 手机 电话卡END -->

          <!-- 电视 盒子 -->
          <el-collapse-item name="2"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">电视 盒子</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in TVList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 电视 盒子END -->

          <!-- 笔记本 显示器 -->
          <el-collapse-item name="3"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">笔记本 显示器</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in ComputerList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 笔记本 显示器END -->

          <!-- 家电 插线板 -->
          <el-collapse-item name="4"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">家电 插线板</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in ElectricalList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 家电 插线板END -->

          <!-- 出行 穿戴 -->
          <el-collapse-item name="5"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">出行 穿戴</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in TravelList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 出行 穿戴END -->

          <!-- 智能 路由器 -->
          <el-collapse-item name="6"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">智能 路由器</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in IntelligenceList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 智能 路由器END -->

          <!-- 电源 配件 -->
          <el-collapse-item name="7"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">电源 配件</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in ApplianceList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 电源 配件END -->

          <!-- 健康 儿童 -->
          <el-collapse-item name="8"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">健康 儿童</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in HealthyList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 健康 儿童END -->

          <!-- 耳机 音箱 -->
          <el-collapse-item name="9"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">耳机 音箱</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in HeadsetList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 耳机 音箱END -->


          <!-- 生活 箱包-->
          <el-collapse-item name="10"> 
            <template slot="title">
              <p style="font-size:20px;margin-left: 10px;">生活 箱包</p>
            </template>
            <div class="list">
                <div v-for="(item,index) in LifeList" :key="index">
                  <ul>
                    <li>
                    <router-link to="/detail">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </router-link>
                    </li>
                  </ul>
                </div>
            </div>
          </el-collapse-item>
          <!-- 生活 箱包END -->



      </el-collapse>
    </div>
    <!-- 主要内容区END -->
  </div>
</template>
<script>
export default {
  name: "goods",
  data() {
    return {
      phoneList: "",
      TVList: "",
      ComputerList: "",
      ElectricalList: "",
      TravelList: "",
      IntelligenceList: "",
      ApplianceList: "",
      HealthyList: "",
      HeadsetList: "",
      LifeList: "",
      activeNames:["1"]
    };
  },
  created() {
    this.$axios
      .get("/data/goods.json")
      .then((res) => {
        this.phoneList = res.data.phoneList;
        this.TVList = res.data.TVList;
        this.ComputerList = res.data.ComputerList;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  watch: {
    // console.log(e)
  },
};
</script>
<style scoped>
@import '../assets/css/index.css';
.goods {
  background: #f5f5f5;
}
/* 面包屑css */
.goods .breadcrumb {
  height: 50px;
  background-color: white;
}
.goods .breadcrumb .el-breadcrumb {
  width: 80%;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
}
/* 面包屑css END */
/* 主要内容区 */
el-collapse el-collapse-item{
  margin: 0 auto;
}

.list{
  width: 90%;
  margin: 0 auto;
  vertical-align: middle;
  text-align: center;
}
.list ul li{
  float: left;
  width:19%;
  border-top: 1px rgb(218, 216, 216) solid;
}

.list ul li img{
  width: 30%;
  margin: 10px 5px 0 5px;
}
.list ul li p{
  color: rgb(90, 88, 88); 
  font-size: 15px;
  margin: 10px 0;
}
.list ul li p:hover{
  color: rgb(241, 22, 22);
}

/* 主要内容区END */
</style>